<template>
  <div id="userCollect">
    <div class="userMaterialTitle">
      <h2 class="active">我的收藏 <span></span></h2>
    </div>
    <div class="userCollectOptions">
      <div @click="handleOptionType(1)">产品<span :class="collectOption === 1 ? 'active' : '' "></span></div>
      <div @click="handleOptionType(2)">作品<span :class="collectOption === 2 ? 'active' : '' "></span></div>
      <div @click="handleOptionType(3)">课堂<span :class="collectOption === 3 ? 'active' : '' "></span></div>
    </div>
    <div class="CollenctContent" v-show="collectOption === 1">
      <ul v-if="collectData.courses">
        <li style="margin-left:10px" v-for="(item, index) in collectData.courses" :key="index" @click="jumpTo('/courseDetail?id=' + item.id)">
          <img :src="$globalImageUrl + item.courseImg" alt="">
          <div>{{item.courseName}}</div>
          <div v-html="item.content"></div>
          <div>{{item.introduce}}</div>
        </li>
      </ul>
    </div>
    <div class="CollenctContent" v-show="collectOption === 2">
      <ul v-if="collectData.literatureList">
        <li style="margin-left:10px" v-for="(item, index) in collectData.literatureList" :key="index" @click="jumpTo('/worksDetail?worksId=' + item.id)">
          <img :src="$globalImageUrl + item.literatureImg" alt="">
          <div>{{item.literatureName}}</div>
          <div v-html="item.content"></div>
          <div>{{item.introduce}}</div>
        </li>
      </ul>
    </div>
    <div class="CollenctContent" v-show="collectOption === 3">
      <ul v-if="collectData.products">
        <li style="margin-left:10px" v-for="(item, index) in collectData.products" :key="index" @click="jumpTo('/worksDetail?sceneType=sell&worksId=' + item.id)">
          <img :src="$globalImageUrl + item.productImg" alt="">
          <div>{{item.productName}}</div>
          <div v-html="item.content"></div>
          <div>{{item.introduce}}</div>
        </li>
      </ul>
    </div>
    <!-- <div class="userCollectContent">
      <ul>
        <li v-for="(item, index) in collectData" :key="index">
          <img class="userCollectProductImg" :src="$globalImageUrl + item.productImg" alt="">
          <h2>{{item.productName}}</h2>
          <p>销量：{{item.buyNum}}</p>
          <div class="publicBookRemark">
            <img src="../../assets/img/common/browse.png" alt="">
            <span>{{item.watchNum}}</span>
            <img src="../../assets/img/common/comment.png" alt="">
            <span>{{item.commentNum}}</span>
            <img src="../../assets/img/common/praise.png" alt="">
            <span>{{item.likeNum}}</span>
          </div>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'userCollect',
  data () {
    return {
      collectData: {},
      collectOption: 1,
      courses: [],
      literatureList: [],
      products: [],
    }
  },
  created () {
    this.fetchCollect()
  },
  methods: {
    // 切换收藏选项
    handleOptionType (val) {
      this.collectOption = val
      console.log(this.collectOption)
    },
    // 获取我的收藏列表
    fetchCollect () {
      this.$api.getCollect({
        userId: this.$store.state.user.userId,
        pageNum: 1
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.collectData = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userCollect{
  .userCollectOptions{
    display: flex;
    div{
      width: 60px;
      margin-top: 30px;
      margin-left: 20px;
      text-align: center;
      span{
        display: inline-block;
        width: 50px;
        height: 3px;
      }
      span.active{
        background-color: #15A29C;
      }
    }
  }
  .CollenctContent{
    ul{
      display: flex;
      li{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width: 200px;
      }
    }
    img{
      width: 200px;
      height: 200px;
    }
  }
  // .userCollectContent{
  //   padding: .2rem;
  //   ul{
  //     li:nth-child(5n) {
  //       margin-right: 0;
  //     }
  //     li{
  //       display: inline-block;
  //       margin: 0 .275rem .27rem 0;
  //       box-shadow: 0 0 10px #eee;
  //       img.userCollectProductImg{
  //         width: 1.5rem;
  //         height: 1.5rem;
  //         display: inline-block;
  //       }
  //       h2{
  //         font-size: .16rem;
  //         font-weight: 500;
  //         color: #333;
  //         line-height: .24rem;
  //         padding: 0 .05rem;
  //       }
  //       p{
  //         font-size: .14rem;
  //         font-weight: 500;
  //         color: #999;
  //         line-height: .22rem;
  //         padding: 0 .05rem;
  //       }
  //       .publicBookRemark{
  //         padding: 0 .05rem;
  //         img{
  //           width: .12rem;
  //           height: .12rem;
  //           display: inline-block;
  //         }
  //         span{
  //           font-size: 0.13rem;
  //           font-weight: 500;
  //           color: #aaa;
  //           line-height: 0.16rem;
  //         }
  //       }
  //     }
  //   }
  // }
}
</style>
